<%@ page language="java" contentType="text/html; charset=utf-8"  pageEncoding="utf-8" %>
<%@page import="com.asiainfo.bean.MealBean"%>
<%@page import="com.asiainfo.util.SessionInfoUtil"%>
<%@page import="com.asiainfo.bean.UserSessionBean"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%
    String path = request.getContextPath();
    UserSessionBean userSessBean = SessionInfoUtil.getUserSessBean(request.getSession());
    if(userSessBean == null){
		String str = "<script>"
				 +"window.location.href='"+path+"/indexController/index.do'"
		           + "</script>";
		response.getWriter().write(str);
		return;
	}else{ 
		request.setAttribute("userSessBean", userSessBean);
	}
    %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<script type="text/javascript"
			src="<%=path%>/view/js/jquery-2.1.4.min.js"> </script>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
		<title>套餐办理</title>
		<link href="<%=path%>/view/css/bootstrap.css" rel="stylesheet" type="text/css" />
		<link href="<%=path%>/view/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<style>
			.title{
	width:100%;
	position:absolute;
	top:0;
	background-color:#3cc;
	text-align:center;
	font-family:"Times New Roman", Times, serif;
}
.container{
	margin-top:60px;
}
.head{
	height:60px;
	line-height:20px;
}
.huanyin{
	text-align:center;
	height:20px;
	line-height:20px;
	width:250px;
	float:left;
}
.exit{
	text-align:center;
	height:20px;
	line-height:20px;
	width:100px;
	float:left;
}
#xiangqing{
	text-align:center;
	height:20px;
	line-height:20px;
	font-size:12px;
	z-index:99;

}
.consumption{
	margin-top:10px;
}
		</style>
		<style type="text/css">
		
		#mealList {
			width:940px;
			min-height:120px;
			overflow:auto;
			margin-left: auto;
			margin-right: auto;
		    }
		    .tdbg_even {
		    font-size: 16px;
		    width:140px;
		    height:10px 
		    }
		
		
		</style>
	</head>
	
	<body>
	<div class="title">
	<h3>掌上电信业务助手</h3>
</div>
<div class="container">
	<div class="head">
		<div class="row">
			<div class="huanyin col-sm-3 col-sm-offset-2 col-xs-3 collapsed" data-toggle="collapse" data-target="#xiangqing">
				<p>欢迎您，<a id="username"><%=userSessBean.getUserName()%></a></p>
			</div>
			<div class="exit col-sm-2 col-sm-offset-3 col-xs-3">
				<span><a onclick="loginout()" id="loginout">退出</a></span>
			</div>
		</div>
		<div id="xiangqing" class="collapse col-sm-8 col-sm-offset-2">
			<div  class="row">
				<div class="col-sm-3">
					号码:<span id="number"><%=userSessBean.getPhone()%></span>
				</div>
				<div class="col-sm-3">
					归属地:<span id="address"><%=userSessBean.getCityName()%></span>
				</div>
				<div class="col-sm-3">
					运营:<span id="operator"><%=userSessBean.getOperatorName()%></span>
				</div>
				<div class="col-sm-3">
					话费余额:<span id="money"><%=userSessBean.getReal_time_balance()%>元</span>
				</div>
			</div>
		</div>
	</div>
	</div>
		<div class="consumption col-sm-8 col-sm-offset-2 col-xs-12">
		<div class="panel panel-success">
			<div class="panel-heading">
				<div class="row">
					<h4 class="col-sm-10 col-xs-10">可选套餐</h4>
					
					<button type="button" class="btn btn-default col-sm-1 col-xs-2" onclick="back()" style="margin-top:5px;"><span aria-hidden="true" style="height:15px;line-height:15px;">返回</span></button>
				</div>
			</div>
			<table class="table table-bordered table-primary">  
			 
				<thead>
					<tr>
						<th  class="tdbg_even" >套餐名称</th>
						<th  class="tdbg_even">流量资费</th>
						<th  class="tdbg_even">短信资费</th>
						<th  class="tdbg_even">通话资费</th>
						<th   class="tdbg_even">套餐资费</th>
						<th   class="tdbg_even">备注</th>
					    <th   class="tdbg_even">操作</th>
					</tr>
				</thead>
				<tbody id="mealBody" valign="top">
				
				<%
					List mealBeanList = (ArrayList) request.getAttribute("mealBeanList");
					MealBean bean = null;
					String tdClass = "";
					if(mealBeanList == null || mealBeanList.isEmpty()){
				%>
				    <tr>
						<td class="tdbg_odd" colspan="3" style="text-align:center;">暂无数据</td>
					</tr>
				<%	
					}else{
						for(int i=0;i<mealBeanList.size();i++)
						{
							bean = (MealBean)mealBeanList.get(i);
							tdClass = i % 2 == 0 ? "tdbg_odd" : "tdbg_even";
				%>
					<tr>
						<td style="font-size: 16px" class="<%=tdClass%>" align="center"><%=bean.getMenu_name()%></td>
						<td style="font-size: 16px" class="<%=tdClass%>" align="center"><%=bean.getData_tariff()%></td>
						<td style="font-size: 16px" class="<%=tdClass%>" align="center"><%=bean.getMessage_tariff()%></td>
						<td style="font-size: 16px" class="<%=tdClass%>" align="center"><%=bean.getCall_tariff()%></td>
						<td style="font-size: 16px" class="<%=tdClass%>" align="center"><%=bean.getMenu_tariff()%></td>
						<td style="font-size: 16px" class="<%=tdClass%>" align="center"><%=bean.getRemark()==null?"-":bean.getRemark()%></td>
						<td style="font-size: 16px" class="<%=tdClass%>" align="center">
							<a href="javascript:void(0)" onclick='orderMeal("<%=bean.getMenu_id()%>")'>订购</a>
						</td>
					</tr>	
				<%		
						} 
					}
				%>
				</tbody> 
			</table>
		</div>
		</div>
<script type="text/javascript" src="<%=path%>/view/javascript/DatePicker.js"></script>
<script type="text/javascript" src="<%=path%>/view/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<%=path%>/view/js/jquery.js"></script>
<script type="text/javascript" src="<%=path%>/view/js/bootstrap.js"></script>
<script type="text/javascript" src="<%=path%>/view/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=path%>/view/js/DatePicker2.js"></script>
<script type="text/javascript" src="<%=path%>/view/js/jquery-2.1.4.min.js"></script>

<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js"></script>



<script type="text/javascript">
		
		   function orderMeal(menu_id)
		   {
			   var actionUrl= "<%=path%>/mealController/orderMeal.do";
			   $.ajax({  
		        	 url:actionUrl,
			         type:"post", 
			         data:JSON.stringify({serial_number:menu_id
		        	 }),
			         dataType:"JSON",
				     cache:false,
				     contentType:"application/json", 
				     success:function(data){
			        	 if(data.flag == true){
			         		alert("订购成功！");
			        	 }else if(data.have ==true){
			        		alert("当前套餐已订购过");
		        		 }else {
			        		 window.location.href = "<%=path%>/loginController/login.do";	
			        	 }
			         }, 
			         error: function(req) {
			        	 alert("失败");
			        		}
			     });
		   }
		   function loginout(){  
			    
		   		var actionUrl= "<%=path%>/loginController/logout.do";
		   	 
		       $.ajax({  
		           url:actionUrl,  
		           type:"post",  
		           dataType : "JSON",
				    cache:false,
				   success:function(data){  
		           	window.location.href = "<%=path%>/loginController/login.do";	 
		           }, 
		       error: function(req) {
					alert("退出失败");
				}
		       });  
		   }
		   function back(){
				window.location.href = "<%=path%>/indexController/index.do";
			}
		</script>
	</body>
</html>